import "./App.css";
import {
  SET_HOME_VALUE,
  SET_COUNTER_VALUE,
} from "./store/actionType/constants";
import {changeValue} from "./store/actionCreators"
import { useDispatch, useSelector } from "react-redux";
import Axios from "axios";
function App() {
  const dispatch = useDispatch();
  const { counter, home } = useSelector((state) => {
    return state;
  });
  const { counterValue } = counter;
  const { homeValue } = home;
  const handleReduxThunk =()=>{
    Axios.get('/api/home').then(res=>{
      const {data} =res
      dispatch(changeValue(SET_HOME_VALUE,data))
    })
  }
  return (
    <div className="App">
      react redux
      <h1>{counterValue}</h1>
    <div>
      {
        homeValue.map(ite=>{
          return (
            <div key={ite.age}>
              <h1>{ite.username}</h1>
              <h1>{ite.age}</h1>

            </div>
          )
        })
      }
    </div>
      <button onClick={()=>dispatch(changeValue(SET_COUNTER_VALUE))}>更改counter</button>
      <button onClick={()=>dispatch(changeValue(SET_HOME_VALUE,[{username:"ceshi",age:99}]))}>更改home值</button>
      <button onClick={()=>handleReduxThunk()}>测试异步redu-thunk</button>

    </div>
  );
}

export default App;
